<template>
    <el-dialog :visible.sync="modals" title="改数量" class="order_box" :before-close="handleClose" width="600px">
        <el-table :data="formItem.orderInfo">

            <el-table-column prop="date" label="商品" align="center">
                <template slot-scope="scope">{{ scope.row.info.productName }}</template>
            </el-table-column>
            <el-table-column prop="payNum" label="数量" align="center">
                <template slot-scope="scope">
                    <el-input-number size="mini" :min="1" v-model="scope.row.info.payNum" placeholder="请输入数量">
                    </el-input-number>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer">
            <el-button type="primary" @click="putSend('formItem')" :loading="btnLoading">提交</el-button>
            <el-button @click="cancel('formItem')">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { orderUpdateNum, sheetInfoApi, orderDetailApi } from '@/api/order'
import { expressAllApi, exportTempApi } from '@/api/sms'
import { checkPermi } from "@/utils/permission"; // 权限判断函数
import { Debounce } from '@/utils/validate'
const validatePhone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('请填写手机号'));
    } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'));
    } else {
        callback();
    }
};
export default {
    name: 'orderSend',
    props: {
        orderId: String
    },
    data() {
        return {
            btnLoading:false,
            formItem: {
                type: '1',
                expressRecordType: '1',
                sendType: 0,
                expressId: '',
                expressCode: '',
                deliveryName: '',
                deliveryTel: '',
                expressNumber: '',
                expressTempId: '',
                toAddr: '',
                toName: '',
                toTel: '',
                orderNo: '',
                orderInfo: []
            },
            modals: false,
            express: [],
            exportTempList: [],
            order: {},
            tempImg: '',

            expressType: 'normal'
        }
    },
    mounted() {
    },
    methods: {
        checkPermi,
        sendTypeChange(t) {
            this.formItem.sendType = t
        },
        // 默认信息
        sheetInfo() {
            sheetInfoApi().then(async res => {
                this.formItem.toAddr = res.exportToAddress || '';
                this.formItem.toName = res.exportToName || '';
                this.formItem.toTel = res.exportToTel || '';
            })
        },
        getDetail(id) {
            orderDetailApi({ orderNo: id }).then(res => {
                this.order = res
                this.formItem = res

                console.log(this.formItem);
            }).catch(() => {
                this.order = {}
            })
        },

        // 电子面单模板
        exportTemp(val) {
            exportTempApi({ com: val }).then(async res => {
                this.exportTempList = res.data.data || [];
            })
        },
        onChangeImg(item) {
            this.exportTempList.map(i => {
                if (i.temp_id === item) this.tempImg = i.pic
            })
        },

        // 物流公司列表
        getList() {
            expressAllApi({ type: this.expressType }).then(async res => {
                this.express = res
            })
        },
        // 提交
        putSend: Debounce(function (name) {
            this.formItem.orderNo = this.orderId;

            orderUpdateNum(this.formItem).then(async => {
                this.$message.success('修改成功');
                this.modals = false;
                this.$refs[name].resetFields();
                this.$emit('submitSuccess')
            })
        }),
        handleClose() {
            this.cancel('formItem');
        },
        cancel(name) {
            this.modals = false;
            this.$refs[name].resetFields();
            this.formItem.type = '1';
            this.formItem.expressRecordType = '1';
        }
    }
}
</script>

<style scoped lang="scss">
.width8 {
    width: 80%;
}

.width9 {
    width: 70%;
}

.tempImgList {
    // opacity: 1;
    width: 38px !important;
    height: 30px !important;
    // margin-top: -30px;
    cursor: pointer;
    position: absolute;
    z-index: 11;

    img {
        width: 38px !important;
        height: 30px !important;
    }
}
</style>